<template>
  <div class="article">
    <b-row>
      <b-col cols="4">
        <!-- article cover -->
        <el-image :src="imgUrl" fit="fill"> </el-image>
      </b-col>
      <b-col cols="8">
        <b-row>
          <b-col cols="12" class="title-content" v-text="title"> </b-col>
        </b-row>
        <!-- article content-->
        <b-row class="d-none d-md-block d-sm-none">
          <b-col cols="12" v-text="simpleContent" class="simple-content">
          </b-col>
        </b-row>
        <!-- article info -->
        <b-row style="font-size: 10px; margin-top: 5px">
          <b-col md="2" cols="3">
            <router-link :to="linkUrl" class="link">
              More..
            </router-link>
          </b-col>
          <b-col md="4" cols="9" offset-md="6">
            by <span v-text="author"></span>. <span v-text="postDate"></span>.
            <i class="el-icon-chat-round" v-text="commentCount"></i>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { BRow, BCol } from "bootstrap-vue";

export default {
  name: "paper",
  data() {
    return {};
  },
  components: {
    BRow,
    BCol
  },
  props: {
    imgUrl: {
      type: String,
      default:
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
    },
    title: {
      type: String,
      default: "JavaScript-性能优化，函数节流（throttle）与函数去抖（debounce）"
    },
    simpleContent: {
      type: String,
      default:
        "我在写一个类似百度搜索框的自动提示功能时候，使用了AJAX+keydown事件。调试时候我发现，当在搜索框中输入文字的时候，控制台在不停发送AJAX。这在本地服务器测试还好，如果我把它拿到运行环境，很可能出现提示功能卡顿，甚至没等提示出现用户就输入完毕的现象。毕竟大家现在打字都很快啊。于是我找到了一个新技能，函数节流 & 函数去抖。 \n" +
        "throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。"
    },
    linkUrl: {
      type: String,
      default: "/post/sdfsd"
    },
    author: {
      type: String,
      default: "rainbow"
    },
    postDate: {
      type: String,
      default: "几分钟前"
    },
    commentCount: {
      type: Number,
      default: 12
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.title-content,
/deep/.simple-content {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

/deep/.title-content {
  -webkit-line-clamp: 2;
  font-weight: bold;
}
/deep/.simple-content {
  font-size: 13px;
  -webkit-line-clamp: 4;
}
</style>
